<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default{
		components: {
			uniSearchBar,
		},
		data(){
			return{
				peoples:[],
				myCount:""
			}
		},
		onLoad:function(){ 
			this.init();
		},
		onShow:function(){
			this.init();
		},
		methods:{
			init:function(){
				console.log("init方法");
				try {
					this.myCount = uni.getStorageSync("myCount");
					console.log(JSON.stringify(this.myCount))
					this.getUserMessage();
				} catch(e) {
					console.log("获取个人信息失败")
				}
			},
			getUserMessage:function(){
				uni.request({
					url:"http://"+global.address+":8081/message/getUserMsgList/" + this.myCount.userId+"/"+this.myCount.username,
					method:"GET",
					success: (res)=>{
						this.peoples = res.data;
						
					} 
				})
			}, 
			tochat:function(role){
				console.log(JSON.stringify(role));
				uni.navigateTo({
					url:'chatpage?role='+JSON.stringify(role)
				})
			}
		}
	}
</script>
<template>
	<view>
		<view class="search">
			<uni-search-bar :radius="40" @confirm="search"></uni-search-bar>
		</view>
		<view class="roles" v-for="(role, index) in peoples" :key="index"  @click="tochat(role)">
			<image class="photo-own" :src="role.photo" v-if="role.photo != null"></image> 
			<image class="photo" src="../../static/img/photo.jpg" v-else></image>
			<p class="text">{{role.name}}</p>
			<view v-if="role.msgNum!=0" class="unread"><p>{{role.msgNum}}</p></view>
		</view>
		</hr>
	</view>
</template>
<style>
	.search{
		 height: 10rpx;
		 margin-bottom: 40px;
	}
	.roles{
		height: 75px;
		width: 100%;
		/* background-color: rgba(0,0,0,0.1); */
	}
	.photo{
		float: left;
		height: 50px;
		width: 50px;
		margin-top: 12px;
		margin-left: 20px;
	}
	.photo-own{
		float: left;
		height: 50px;
		width: 50px;
		margin-top: 12px;
		margin-left: 20px;
		border-radius:100px;
	}
	.text{
		float: left;
		font-size: 20px;
		margin-top: 12px;
		margin-left: 20px;
	}
	.unread{
		float: right;
		font-size: 14px;
		margin-top: 12px;
		margin-right: 18px;
		color: #ffffff;
		text-align: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background-color: #ff0000;
	}
</style>